Overview

This pull request decouples the player code (lib directory) from the web application’s build process. Previously, the player was transpiled from TypeScript to JavaScript using tsc and then integrated into the web application where Vite was used to finalize the build. This meant the web application’s build tool needed to handle and bundle the player’s source files.

With these changes, we now produce a standalone build of the player. It can be imported as a package:

import MoqPlayer from "moq-player";

or directly included in an HTML page:

<script src="./moq-player.iife.js"></script>

Key Changes

1. Switching to Rollup:

To achieve this separation, we moved from using Vite internally for the player to using Rollup. Rollup was chosen because it is commonly used in similar projects (e.g., HLS.js).

2. Handling Web Workers and Audio Worklets:

The main challenge was properly bundling web workers and audio worklets, as they must be included directly in the final build and are imported differently than standard modules. For more context, see this related Vite issue.

Previously, under Vite, workers and worklets were imported using special way:

import workletURL from "./worklet/index.ts?worker&url";
import MediaWorker from "./worker?worker";

This approach allowed Vite to understand how to include these resources in the build.

With Rollup, we now leverage the rollup-plugin-web-worker-loader to handle workers and worklets. This plugin has its own conventions for importing such resources, so the imports have been adjusted accordingly.

3. Generating Two Builds (IIFE and ESM):

We now produce two versions of the player:

• IIFE Build: Can be included directly via a <script> tag in an HTML page.
• ESM Build: Can be imported as a module into modern JavaScript applications.

Example using the IIFE build:

<script src="./moq-player.iife.js"></script>
<script>
  const elem = document.getElementById("canvas");
  const config = {
    url: "https://localhost:4443",
    fingerprint: "https://localhost:4443/fingerprint",
    canvas: elem,
    namespace: "bbb"
  };

  moqplayer.create(config, 1).then((player) => {
  });
</script>

To host this example, we use an Express server configured to send the "Cross-Origin-Opener-Policy": "same-origin" and "Cross-Origin-Embedder-Policy": "require-corp" headers. These headers are required for using SharedArrayBuffer.

4. Using the Player in a Web Application: For the integrated web application scenario, you only need to add the player as a dependency in package.json and then import it:

import MoqPlayer from "moq-player";

The web application’s bundler can then include the player without needing to rebuild it.

5. Removing the 'publish' Page in the Web App: Since the standalone player build only exposes the player functionality and does not include some additional components (like those used by publish or features from contribute and transport), we have removed the publish page from the web application.